import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import CopyIcon from "@/assets/images/order/copy_icon.png";
import * as Clipboard from "expo-clipboard";
import {useSelector} from "react-redux";
import {RootState} from "@/store";

export default function orderDataDetailScreen() {

    const router = useRouter();
    const activity = useSelector((state: RootState) => state.activityDetail).activityOrderDetail;

    const copyToClipboard = (content) => {
        Clipboard.setStringAsync(content);
    };


    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '查看详情', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <ScrollView>
                <View style={styles.detailContainer}>
                    <View style={styles.detailWrap}>
                        <View style={styles.allPrice}>
                            <View style={styles.allPriceItem}>
                                <Text style={styles.allPriceText}>总价</Text>
                                <Text style={styles.allPriceText}>¥{ activity?.price }</Text>
                            </View>
                            <View style={[styles.allPriceItem, styles.allPriceItem_paid]}>
                                <Text style={styles.allPriceText}>实付款</Text>
                                <Text style={[styles.allPriceText, styles.colorRed]}>¥{ activity.amount }</Text>
                            </View>
                        </View>

                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>门票类型</Text>
                            <Text style={styles.allPriceText}>{ activity.ticketName }</Text>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>用户昵称</Text>
                            <View style={{ flexDirection: "row", alignItems: "center" }}>
                                <Text style={[styles.allPriceText]}>{ activity?.userNickname }</Text>
                            </View>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>用户ID</Text>
                            <View style={{ flexDirection: "row", alignItems: "center" }}>
                                <Text style={[styles.allPriceText]}>{ activity?.uid }</Text>
                                <TouchableOpacity onPress={() => copyToClipboard(activity?.uid)}>
                                    <View style={{ width: 14, height: 14, marginLeft: 6}}>
                                        <Image source={CopyIcon} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>订单号</Text>
                            <View style={{ flexDirection: "row", alignItems: "center" }}>
                                <Text style={[styles.allPriceText]}>{ activity.orderId }</Text>
                                <TouchableOpacity onPress={() => copyToClipboard(activity?.uid)}>
                                    <View style={{ width: 14, height: 14, marginLeft: 6}}>
                                        <Image source={CopyIcon} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>创建时间</Text>
                            <Text style={styles.allPriceText}>{ activity.placeTime }</Text>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>付款时间</Text>
                            <Text style={styles.allPriceText}>{ activity.payTime }</Text>
                        </View>
                    </View>
                </View>
            </ScrollView>
        </View>

    );
}

const styles = StyleSheet.create({
    detailContainer: {
        padding: 12,
    },
    detailWrap: {
        backgroundColor: "#fff",
        // padding: 12,
        paddingHorizontal: 12,
        borderRadius: 8,
    },
    waitPayCardDetail: {
        flexDirection: "row",
    },
    waitPayCardDetailBanner: {
        width: scaleSize(74),
        height: scaleSize(74),
        backgroundColor: "blue",
        borderRadius: 4,
    },
    waitPayCardDetailContent: {
        marginLeft: 10,
    },
    waitPayCardDetailTitle: {
        fontSize: 14,
        color: "#2A2B30",
        fontWeight: "bold",
        width: scaleSize(220)
    },
    waitPayNumber: {
        marginTop: 6,
    },
    waitPayNumberText: {
        fontSize: 12,
        color: "#9C9EAC"
    },
    waitPayMoney: {
        marginTop: 25,
    },
    waitPayMoneyText: {
        fontSize: 14,
        color: "#ED2A20",
        fontWeight: "bold",
    },
    allPrice: {

        marginTop: 22,
        paddingBottom: 20,
        borderBottomColor: "#E4E6EC",
        borderBottomWidth: 0.5  ,
        marginBottom: 20,
    },
    allPriceItem: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    allPriceItem_paid: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 22,
    },
    allPriceText: {
        color: "#2A2B30",
        fontSize: 14,
    },
    colorRed: {
        color: "red",
    },
    activityTypeWarp: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 22
    },
    botBtnWarp: {
        position: "absolute",
        bottom: 0,
        width: "100%",
        backgroundColor: "#FFF",
        height: 77,
        flexDirection: "row",
        justifyContent: "flex-end",
        paddingTop: 8,
        paddingRight: 16,
    },
    cancelOrder: {
        width: 80,
        height: 32,
        borderRadius: 20,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "#2A2B30",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginRight: 12,
    },
    cancelOrderText: {
        color: "#2A2B30",
        fontSize: 12,
    },
    goPayWarp: {
        width: 80,
        height: 32,
        borderRadius: 20,
        backgroundColor: "#EC6138",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",

    },
    goPayWarpText: {
        color: "#fff",
        fontSize: 12,
    },
    cancelBecame: {
        flexDirection: "row",
        justifyContent: "center",
        marginTop: 6,
        marginBottom: 14,
    },
    cancelBecame_text: {
        color: "#2A2B30",
        fontSize: 14,
    },
    refundContainer: {
        width: scaleSize(351),
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: "#fff",
        paddingTop: 15,
        paddingBottom: 14,
        paddingLeft: 12,
        paddingRight: 12,
        marginBottom: 12,
    },
    refundDetail: {
        marginBottom: 10,
    },
    refundDetailText: {
        fontSize: 14,
        color: "#2A2B30",
        fontWeight: "bold",
    },
    refundResult: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    result: {
        fontSize: 12,
        color: "#9C9EAC",
    },
    resultMoney: {
        fontSize: 14,
        color: "#EC6138"
    },
});
